﻿@using SmartStore.GoogleMerchantCenter;
@using SmartStore.GoogleMerchantCenter.Models;
@using SmartStore.GoogleMerchantCenter.Providers;
@using SmartStore.Web.Framework;
@using Telerik.Web.Mvc.UI;
@using SmartStore.Web.Framework.UI;
@model FeedGoogleMerchantCenterModel
@{
	Layout = "";

	Html.AddCssFileParts(true, "~/Content/vendors/x-editable/bootstrap-editable.css");
	Html.AppendScriptParts(true, "~/Content/vendors/x-editable/bootstrap-editable.js");
}

<style type="text/css">
	.gmc-adult,
	.gmc-pattern,
	.gmc-multipack,
	.gmc-bundle,
	.gmc-eec,
	.gmc-label0,
	.gmc-label1,
	.gmc-label2,
	.gmc-label3,
	.gmc-label4 {
		display: none;
	}
</style>

<div class="plugin-configuration">
	<div>
		<div class="alert alert-info alert-dismissible">
			@Html.Raw(@T("Plugins.Feed.Froogle.AdminInstruction"))
			<button class="close" data-dismiss="alert">&times;</button>
		</div>
	</div>
	<div>
		<a href="http://www.google.com/merchants/" rel="nofollow" target="_blank">
			<img src="@Url.Content("~/Plugins/SmartStore.GoogleMerchantCenter/Content/branding.png")" alt="Google Merchant Center" />
		</a>
	</div>
</div>


@Html.SmartStore().TabStrip().Name("gmc-config").Style(TabsStyle.Material).Items(x =>
{
	x.Add().Text(T("Plugins.Feed.Froogle.TabTitleGrid").Text).Content(TabGrid()).Selected(true);
	x.Add().Text(T("Plugins.Feed.Froogle.TabTitleProfiles").Text).Content(TabProfiles());
})


@helper TabGrid()
{
	<div class="row mt-3 grid-filter">
		<div class="col-sm-6 col-xl-3 form-group">
			@Html.SmartLabelFor(model => model.SearchProductName)
			@Html.EditorFor(model => Model.SearchProductName, new { @class = "form-control" })
		</div>
		<div class="col-sm-6 col-xl-3 form-group">
			@Html.SmartLabelFor(m => m.SearchIsTouched)
			@Html.DropDownListFor(m => m.SearchIsTouched, new List<SelectListItem>
				{
					new SelectListItem { Text = T("Common.Unspecified"), Value = "" },
					new SelectListItem { Text = T("Plugins.Feed.Froogle.SearchIsTouched.Touched"), Value = "touched" },
					new SelectListItem { Text = T("Plugins.Feed.Froogle.SearchIsTouched.Untouched"), Value = "untouched" }
				})
		</div>
		<div class="col-sm-6 col-xl-3 form-group">
			@Html.SmartLabel(string.Empty, string.Empty)
			<button type="submit" id="search-products" value="search-product" class="btn btn-secondary btn-block">
				<span>@T("Admin.Common.ApplyFilter")</span>
			</button>
		</div>
		<div class="col-sm-6 col-xl-3 form-group text-right">
			@Html.SmartLabel(string.Empty, string.Empty)
			<div class="dropdown dropdown-columns">
				<button class="btn btn-secondary btn-flat dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<i class="fa fa-columns"></i>
					<span>@T("Common.Columns")</span>
				</button>
				<div class="dropdown-menu dropdown-menu-right">
					<div class="grid-columns-selector px-4 py-2">
						<!-- Created by script on page load -->
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div>
		@(Html.Telerik().Grid<GoogleProductModel>()
			.Name("gmc-products-grid")
			.DataKeys(keys =>
			{
				keys.Add(x => x.ProductId).RouteKey("ProductId");
			})
			.Columns(c =>
			{
				c.Bound(x => x.ProductId)
					.ReadOnly()
					.Visible(false);
				c.Bound(x => x.Name)
					.ReadOnly().Visible(true)
					//.Width("30%")
					.Template(x => @Html.LabeledProductName(x.ProductId, x.Name, x.ProductTypeName, x.ProductTypeLabelHint))
					.ClientTemplate(@Html.LabeledProductName("ProductId", "Name"));
				c.Bound(x => x.SKU)
					//.Width(100)
					.ReadOnly()
					.Visible(true);
				c.Bound(x => x.Export2)
					.Width(100)
					.ClientTemplate(XEditableLink("Export2", "select2").ToHtmlString());
				c.Bound(x => x.Taxonomy)
					.HtmlAttributes(new { @class = "gmc-taxonomy" })
					.HeaderHtmlAttributes(new { @class = "gmc-taxonomy", data_field = "taxonomy" })
					.ClientTemplate(XEditableLink("Taxonomy", "select2").ToHtmlString());
				c.Bound(x => x.Gender)
					.HtmlAttributes(new { @class = "gmc-gender" })
					.HeaderHtmlAttributes(new { @class = "gmc-gender", data_field = "gender" })
					.ClientTemplate(XEditableLink("Gender", "select2").ToHtmlString());
				c.Bound(x => x.AgeGroup)
					.HtmlAttributes(new { @class = "gmc-agegroup" })
					.HeaderHtmlAttributes(new { @class = "gmc-agegroup", data_field = "agegroup" })
					.ClientTemplate(XEditableLink("AgeGroup", "select2").ToHtmlString());
				c.Bound(x => x.IsAdult)
					.HtmlAttributes(new { @class = "gmc-adult" })
					.HeaderHtmlAttributes(new { @class = "gmc-adult", data_field = "adult" })
					.ClientTemplate(XEditableLink("IsAdult", "select2").ToHtmlString());
				c.Bound(x => x.Color)
					.HtmlAttributes(new { @class = "gmc-color" })
					.HeaderHtmlAttributes(new { @class = "gmc-color", data_field = "color" })
					.ClientTemplate(XEditableLink("Color", "text").ToHtmlString());
				c.Bound(x => x.Size)
					.HtmlAttributes(new { @class = "gmc-size" })
					.HeaderHtmlAttributes(new { @class = "gmc-size", data_field = "size" })
					.ClientTemplate(XEditableLink("Size", "text").ToHtmlString());
				c.Bound(x => x.Material)
					.HtmlAttributes(new { @class = "gmc-material" })
					.HeaderHtmlAttributes(new { @class = "gmc-material", data_field = "material" })
					.ClientTemplate(XEditableLink("Material", "text").ToHtmlString());
				c.Bound(x => x.Pattern)
					.HtmlAttributes(new { @class = "gmc-pattern" })
					.HeaderHtmlAttributes(new { @class = "gmc-pattern", data_field = "pattern" })
					.ClientTemplate(XEditableLink("Pattern", "text").ToHtmlString());
				c.Bound(x => x.Multipack2)
					.HtmlAttributes(new { @class = "gmc-multipack" })
					.HeaderHtmlAttributes(new { @class = "gmc-multipack", data_field = "multipack" })
					.ClientTemplate(XEditableLink("Multipack2", "text").ToHtmlString());
				c.Bound(x => x.IsBundle)
					.HtmlAttributes(new { @class = "gmc-bundle" })
					.HeaderHtmlAttributes(new { @class = "gmc-bundle", data_field = "bundle" })
					.ClientTemplate(XEditableLink("IsBundle", "select2").ToHtmlString());
				c.Bound(x => x.EnergyEfficiencyClass)
					.HtmlAttributes(new { @class = "gmc-eec" })
					.HeaderHtmlAttributes(new { @class = "gmc-eec", data_field = "eec" })
					.ClientTemplate(XEditableLink("EnergyEfficiencyClass", "select2").ToHtmlString());
				c.Bound(x => x.CustomLabel0)
					.HtmlAttributes(new { @class = "gmc-label0" })
					.HeaderHtmlAttributes(new { @class = "gmc-label0", data_field = "label0" })
					.ClientTemplate(XEditableLink("CustomLabel0", "text").ToHtmlString());
				c.Bound(x => x.CustomLabel1)
					.HtmlAttributes(new { @class = "gmc-label1" })
					.HeaderHtmlAttributes(new { @class = "gmc-label1", data_field = "label1" })
					.ClientTemplate(XEditableLink("CustomLabel1", "text").ToHtmlString());
				c.Bound(x => x.CustomLabel2)
					.HtmlAttributes(new { @class = "gmc-label2" })
					.HeaderHtmlAttributes(new { @class = "gmc-label2", data_field = "label2" })
					.ClientTemplate(XEditableLink("CustomLabel2", "text").ToHtmlString());
				c.Bound(x => x.CustomLabel3)
					.HtmlAttributes(new { @class = "gmc-label3" })
					.HeaderHtmlAttributes(new { @class = "gmc-label3", data_field = "label3" })
					.ClientTemplate(XEditableLink("CustomLabel3", "text").ToHtmlString());
				c.Bound(x => x.CustomLabel4)
					.HtmlAttributes(new { @class = "gmc-label4" })
					.HeaderHtmlAttributes(new { @class = "gmc-label4", data_field = "label4" })
					.ClientTemplate(XEditableLink("CustomLabel4", "text").ToHtmlString());
			})
			.ClientEvents(e =>
			{
				e.OnDataBinding("OnGridDataBinding");
				e.OnDataBound("OnGridDataBound");
				e.OnRowDataBound("OnGridRowDataBound");
				e.OnError("OnGridError");
			})
			.DataBinding(dataBinding =>
			{
				dataBinding.Ajax().Select("GoogleProductList", "FeedGoogleMerchantCenter");
			})
			.Pageable(settings => settings.PageSize(Model.GridPageSize).Position(GridPagerPosition.Both))
			.PreserveGridState()
			.EnableCustomBinding(true)
		)

	</div>
}

@helper TabProfiles()
{	
	<style>
		.info-profile:not(:first-child) {
			border-top: 1px solid #e1e4e8;
			margin-top: 1.25rem;
			padding-top: 1.25rem;
		}
	</style>

	@Html.Action("InfoProfile", "Export", new { systemName = GmcXmlExportProvider.SystemName, returnUrl = Request.RawUrl, area = "admin" })
}

@helper XEditableLink(string fieldName, string type)
{
	 var displayText = fieldName == "Gender" || fieldName == "AgeGroup" || fieldName == "Export2" || fieldName == "IsBundle" || fieldName == "IsAdult"
		? "<#= {0}Localize #>".FormatInvariant(fieldName)
		: "<#= {0} #>".FormatInvariant(fieldName);

	<a href="#" 
	   class="edit-link-@(fieldName.ToLower())" 
	   data-pk="<#= ProductId #>"
	   data-name="@fieldName"
	   data-value="<#= @fieldName #>"
	   data-inputclass="form-control form-control-sm edit-@(fieldName.ToLower())"
	   data-type="@type">@displayText</a>
}

<script>
	var _userFlags = localStorage.getItem("gmc.grid.columnFlags");
	var columnFlags = _userFlags ?
		JSON.parse(_userFlags) :
		{
			taxonomy: true,
			gender: true,
			agegroup: true,
			color: true,
			size: true,
			material: true
		};

	$(function () {
		// Column toggle handling

		var menu = $('.grid-columns-selector');

		// Dont't close menu when edge is clicked
		menu.on('click', function (e) { e.stopPropagation(); });

		// Apply toggling
		menu.on('click', '.column-toggle', function (e) {
			var fieldName = $(this).data('field');
			var checked = $(this).prop('checked');
			toggleColumn(fieldName, checked);
			columnFlags[fieldName] = checked;

			// Save
			localStorage.setItem("gmc.grid.columnFlags", JSON.stringify(columnFlags));
		});

		// Append selector (checkbox) to dropdown menu
		var ths = $('#gmc-products-grid .t-header[data-field]').each(function () {
			var fieldName = $(this).data("field");
			if (fieldName) {
				var visible = columnFlags[fieldName] === true;
				var checked = (visible ? ' checked' : '');
				var html = [
					'<div class="custom-control custom-checkbox my-1">',
					'	<input type="checkbox" class="custom-control-input column-toggle" id="grid-col-{0}" data-field="{0}"{1}>'.format(fieldName, checked),
					'	<label class="custom-control-label" for="grid-col-{0}">{1}</label>'.format(fieldName, $(this).children().text()),
					'</div>'
				].join('');
				menu.append(html);
			}
		});

		$('#search-products').on('click', function () {
			var grid = $('#gmc-products-grid').data('tGrid');
			grid.currentPage = 1;
			grid.ajaxRequest();
			return false;
		});
	});

	function toggleColumn(col /* TH or fieldName */, display) {
		var th, fieldName = col;

		if (typeof col === 'string') {
			th = $('#gmc-products-grid .t-header[data-field="' + col + '"]');
		}
		else {
			th = $(col);
			fieldName = th.data('field');
		}

		// Toggle TR display
		th.toggle(display);

		// Toggle all corresponding TDs display
		var tds = $('#gmc-products-grid td.gmc-' + fieldName);
		tds.toggle(display);
	}

	function OnGridError(e) {
		e.preventDefault();
		alert(e.XMLHttpRequest.responseText);
	}

	function OnGridDataBinding(e) {
		e.data = {
			searchProductName: $('#SearchProductName').val(),
			touched: $('#SearchIsTouched').val()
		};
	}

	function OnGridDataBound(e) {
		var grid = $(e.currentTarget);

		var ths = grid.find('.t-header[data-field]').each(function () {
			var fieldName = $(this).data("field");
			if (fieldName) {
				var visible = columnFlags[fieldName] === true;
				// Apply toggling to all TH and all its TDs
				toggleColumn(this, visible);
			}
		});
	}

	function OnGridRowDataBound(e) {
		var grid = $(e.currentTarget),
			row = $(e.row),
			emptyCell = @T("Plugins.Feed.Froogle.EmptyGridCell").JsText;

		var options = {
			mode: 'popup',
			placement: 'right',
			emptytext: emptyCell,
			url: '@Url.Action("GoogleProductEdit", "FeedGoogleMerchantCenter", new { Namespaces = "SmartStore.GoogleMerchantCenter.Controllers", area = GoogleMerchantCenterFeedPlugin.SystemName })'
		};
		var rightOptions = $.extend({}, options, {
			placement: 'left'
		});
		var select2Options = {
			placeholder: emptyCell,
			minimumResultsForSearch: 20,
			allowClear: true,
			language: '@Model.LanguageSeoCode'
		};
		var boolSource = [
			{ id: 'true', text: @T("Admin.Common.Yes").JsText },
			{ id: 'false', text: @T("Admin.Common.No").JsText }
		];

		row.find('a.edit-link-export2').editable($.extend({}, options, {
			select2: {
				minimumResultsForSearch: 20
			},
			source: boolSource
		}));

		row.find('a.edit-link-gender').editable($.extend({}, options, {
			select2: select2Options,
			source: [
				{ id: 'male', text: @T("Plugins.Feed.Froogle.GenderMale").JsText },
				{ id: 'female', text: @T("Plugins.Feed.Froogle.GenderFemale").JsText },
				{ id: 'unisex', text: @T("Plugins.Feed.Froogle.GenderUnisex").JsText }
			]
		}));

		row.find('a.edit-link-agegroup').editable($.extend({}, options, {
			select2: select2Options,
			source: [
				{ id: 'adult', text: @T("Plugins.Feed.Froogle.AgeGroupAdult").JsText },
				{ id: 'kids', text: @T("Plugins.Feed.Froogle.AgeGroupKids").JsText }
			]
		}));

		row.find('a.edit-link-isadult').editable($.extend({}, options, {
			select2: select2Options,
			source: boolSource
		}));

		row.find('a.edit-link-color').editable(options);
		row.find('a.edit-link-size').editable(options);
		row.find('a.edit-link-material').editable(options);
		row.find('a.edit-link-pattern').editable(options);
		row.find('a.edit-link-multipack2').editable($.extend({}, options, {
			validate: function(value) {
				if (value.length !== 0) {
					var regex = /^[0-9]+$/;
					if (!regex.test(value)) {
						return @T("Admin.System.Warnings.DigitsOnly").JsText;
					}
				}
				return null;
			}
		}));

		row.find('a.edit-link-isbundle').editable($.extend({}, options, {
			select2: select2Options,
			source: boolSource
		}));

		row.find('a.edit-link-energyefficiencyclass').editable($.extend({}, options, {
			select2: select2Options,
			source: [
				@if (Model.EnergyEfficiencyClasses != null && Model.EnergyEfficiencyClasses.Any())
				{
					foreach (var str in Model.EnergyEfficiencyClasses.Select(x => x.Replace("'", "\"")))
					{
						<text>{ id: '@Html.Raw(str)', text: '@Html.Raw(str)' },</text>
					}
				}
			]
		}));

		row.find('a.edit-link-customlabel0').editable(rightOptions);
		row.find('a.edit-link-customlabel1').editable(rightOptions);
		row.find('a.edit-link-customlabel2').editable(rightOptions);
		row.find('a.edit-link-customlabel3').editable(rightOptions);
		row.find('a.edit-link-customlabel4').editable(rightOptions);

		var link = row.find('a.edit-link-taxonomy');
		link.editable($.extend({}, options, {
			type: 'select2',
			unsavedclass: null,
			display: function (value, sourceData) {
				$(this).text(value);
			},
			select2: {
				placeholder: emptyCell,
				dropdownAutoWidth: true,
				allowClear: true,
				language: '@Model.LanguageSeoCode',
				width: '500px',
				init: {
					id: link.data('value'),
					text: link.data('value')
				},
				ajax: {
					delay: 300,
					cache: true,
					dataType: 'json',
					type: 'GET',
					url: '@Url.Action("GetGoogleCategories", "FeedGoogleMerchantCenter", new { Namespaces = "SmartStore.GoogleMerchantCenter.Controllers", area = GoogleMerchantCenterFeedPlugin.SystemName })',
					data: function (params) {
						var query = {
							search: params.term,
							page: params.page || 1
						}
						return query;
					},
					processResults: function (data, params) {
						params.page = params.page || 1;

						return {
							results: data.results,
							pagination: {
								more: data.hasMoreItems
							}
						};
					}
				}
			}
		}));
	}
</script>